<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>我自己</title>
    <style>
        html {
            height: 100%;
        }

        body {
            background-image: url("7.jpg");
            background-size: 100% 100%;
            background-repeat: no-repeat;
            overflow: hidden;
        }

        #a {
            border: 1px solid red;
            width: 300px;
            height: 300px;
            margin: 60px auto;
            position: relative;
            transform-style: preserve-3d;
            transform: rotateX(20deg);
            animation: woziji 5s infinite linear alternate;
        }

        #b {
            border: 1px solid blue;
            width: 150px;
            height: 150px;
            margin: 60px auto;
            position: relative;
            transform-style: preserve-3d;
            transform: rotateX(20deg);
            animation: woziji02 2s infinite linear alternate;
        }

        #b div {
            width: 150px;
            height: 150px;
            position: absolute;
        }

        #b img {
            width: 150px;
            height: 150px;
            position: absolute;
            box-shadow: 0 0 500px blue;
        }

        .aa {
            width: 300px;
            height: 300px;
            position: absolute;
        }

        .aimg {
            width: 300px;
            height: 300px;
            position: absolute;
            box-shadow: 0 0 500px violet;
        }

        #a1 {
            transition: 3s;
            transform: rotateX(90deg) translateZ(150px);
        }

        #a2 {
            transition: 3s;
            transform: rotateX(90deg) translateZ(-150px);
        }

        #a3 {
            transition: 3s;
            transform: rotateY(90deg) translateZ(150px);
        }

        #a4 {
            transition: 3s;
            transform: rotateY(90deg) translateZ(-150px);
        }

        #a5 {
            transition: 3s;
            transform: translateZ(150px);
        }

        #a6 {
            transition: 3s;
            transform: translateZ(-150px);
        }

        #a:HOVER #a1 {
            transform: rotateX(90deg) translateZ(350px);
        }

        #a:HOVER #a2 {
            transform: rotateX(90deg) translateZ(-350px);
        }

        #a:HOVER #a3 {
            transform: rotateY(90deg) translateZ(350px);
        }

        #a:HOVER #a4 {
            transform: rotateY(90deg) translateZ(-350px);
        }

        #a:HOVER #a5 {
            transform: translateZ(350px);
        }

        #a:HOVER #a6 {
            transform: translateZ(-350px);
        }

        @keyframes woziji {
            0% {
                transform: rotateX(-90deg) rotateY(50deg) translateZ(250px);
            }
            50% {
                transform: rotateX(80deg) rotateY(60deg) translateZ(-250px);
            }
            100% {
                transform: rotateX(45deg) rotateY(70deg) translateZ(250px);
            }
        }

        #b1 {
            transition: 3s;
            transform: rotateX(90deg) translateZ(75px);
        }

        #b2 {
            transition: 3s;
            transform: rotateX(90deg) translateZ(-75px);
        }

        #b3 {
            transition: 3s;
            transform: rotateY(90deg) translateZ(75px);
        }

        #b4 {
            transition: 3s;
            transform: rotateY(90deg) translateZ(-75px);
        }

        #b5 {
            transition: 3s;
            transform: translateZ(75px);
        }

        #b6 {
            transition: 3s;
            transform: translateZ(-75px);
        }

        @keyframes woziji02 {
            0% {
                transform: rotateX(-90deg) rotateY(50deg);
            }
            50% {
                transform: rotateX(80deg) rotateY(60deg);
            }
            100% {
                transform: rotateX(45deg) rotateY(70deg);
            }
        }
    </style>
</head>
<body>
<div id="a">
    <div id="a1" class="aa">
        <img class="aimg" src="11.jpg" alt="1">
    </div>
    <div id="a2" class="aa">
        <img class="aimg" src="11.jpg" alt="1">
    </div>
    <div id="a3" class="aa">
        <img class="aimg" src="11.jpg" alt="1">
    </div>
    <div id="a4" class="aa">
        <img class="aimg" src="11.jpg" alt="1">
    </div>
    <div id="a5" class="aa">
        <img class="aimg" src="11.jpg" alt="1">
    </div>
    <div id="a6" class="aa">
        <img class="aimg" src="11.jpg" alt="1">
    </div>
    <div id="b">
        <div id="b1">
            <img src="3.jpg" alt="2">
        </div>
        <div id="b2">
            <img src="3.jpg" alt="2">
        </div>
        <div id="b3">
            <img src="3.jpg" alt="2">
        </div>
        <div id="b4">
            <img src="3.jpg" alt="2">
        </div>
        <div id="b5">
            <img src="3.jpg" alt="2">
        </div>
        <div id="b6">
            <img src="3.jpg" alt="2">
        </div>
    </div>
</div>
</body>
</html>